<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="UTF-8" />
    <title>我的购物车-淘宝</title>
    <meta name="description" content="淘宝JD.COM-专业的综合网上购物商城,销售家电、数码通讯、电脑、家居百货、服装服饰、母婴、图书、食品等数万个品牌优质商品.便捷、诚信的服务，为您提供愉悦的网上购物体验!" />
    <meta name="Keywords" content="网上购物,网上商城,手机,笔记本,电脑,MP3,CD,VCD,DV,相机,数码,配件,手表,存储卡,淘宝" />
    <!-- 引入facicon.ico网页图标 -->
    <link rel="shortcut icon" href="/static/img/favicon.ico" type="image/x-icon" />
    <!-- 引入css 初始化的css 文件 -->
    <link rel="stylesheet" href="/static/css/car_base.css" />
    <!-- 引入公共样式的css 文件 -->
    <link rel="stylesheet" href="/static/css/car_common.css" />
    <!-- 引入car css -->
    <link rel="stylesheet" href="/static/css/car.css" />
    <!-- 先引入jquery  -->
    <script src="/static/js/jquery.min.js"></script>
    <!-- 在引入我们自己的js文件 -->
    <script src="/static/js/car.js"></script>
    <!-- 支付 -->
    <script>
            $(function () {
                $("#btn_ajax").click(function () {
                    $.ajax({
                        url: '{% url "good_pay" %}',
                        type: 'POST',
                        dataType: 'JSON',
                        data: {csrfmiddlewaretoken: '{{ csrf_token }}'},
                        success: function (res) {
                            if (res.status === 1) {
                                // 跳转到支付链接
                                location.href = res.url
                            } else {
                                alert('淘宝正在维护 请稍后再试~')
                            }
                        }
                    })
                })
            })

    </script>
<!--    <script>-->
<!--        //离开页面时触发 发送商品价格和名称（不可行）-->
<!--        function send()-->
<!--        {-->
<!--            var htp = new XMLHttpRequest();-->
<!--            //绑定监听事件-->
<!--            htp.onreadystatechange = function(){-->
<!--            if (this.readyState==4&&this.status==200) {-->
<!--                    alert("已发送")-->
<!--                }-->
<!--            }-->
<!--            var goodsprice = document.getElementById('goods_price').innerHTML;-->
<!--            var goodsname = document.getElementById('goods_name').innerHTML;-->
<!--            //3.设置请求信息 参数请求方式 路由 是否为异步 默认true-->
<!--            //post方式请求 发送参数 需要设置请求的头部信息-->
<!--            htp.open('POST','/goodpay/');-->
<!--            htp.setRequestHeader('Content-Type','application/x-www-form-urlencoded')-->
<!--            //发送请求-->
<!--            htp.send('goodsprice='+goodsprice+'&goodsname='+goodsname)-->
<!--        }-->
<!--    </script>-->

    <style>
      .mod-service-icon {
      /*浮动的盒子 可以直接给大小的 不需要转换*/
      float: left;
      width: 50px;
      height: 50px;
      margin-left: 35px;
      background: url("/static/img/icons.png") no-repeat;
    }

    .mod_service_kuai {
    background-position: -255px -54px;
}

.mod_service_bao {
    background-position: -257px -105px;
}
    .mod_service_zheng {
    background-position: -253px -3px;
}

    </style>

  </head>


  <body>
    <!-- 顶部快捷导航start -->
    <div class="shortcut">
      <div class="w">
        <div class="fl">
          <ul>
            <li>淘宝欢迎您！</li>
            <li>
              <a href="#">请登录</a>
              <a href="#" class="style-red">免费注册</a>
            </li>
          </ul>
        </div>
        <div class="fr">
          <ul>
            <li><a href="#">我的订单</a></li>
            <li class="spacer"></li>
            <li>
              <a href="#">我的淘宝</a>
            </li>
            <li class="spacer"></li>
            <li><a href="#">淘宝会员</a></li>
            <li class="spacer"></li>
            <li><a href="#">企业采购</a></li>
            <li class="spacer"></li>
            <li>
              <a href="#">关注淘宝</a>
            </li>
            <li class="spacer"></li>
            <li>
              <a href="#">客户服务</a>
            </li>
            <li class="spacer"></li>
            <li>
              <a href="#">网站导航</a>

            </li>
          </ul>
        </div>
      </div>
    </div>
    <!-- 顶部快捷导航end  -->

    <div class="car-header">
      <div class="w">
        <div class="car-logo">
          <img src="/static/img/logo1.png" alt="" width="175px" height="60px" />
        </div>
      </div>
    </div>

    <div class="c-container">
      <div class="w">
        <div class="cart-filter-bar">
          <em>全部商品</em>
        </div>
        <!-- 购物车主要核心区域 -->
        <div class="cart-warp">
          <!-- 头部全选模块 -->
          <div class="cart-thead">
            <div class="t-checkbox">
              <input type="checkbox" name=""  class="checkall" />
              全选
            </div>
            <div class="t-goods">商品</div>
            <div class="">颜色（尺寸）</div>
            <div class="t-price">单价</div>
            <div class="t-num">数量</div>
            <div class="t-sum">小计</div>
            <div class="t-action">操作</div>
          </div>
          <!-- 商品详细模块 -->
          <div class="cart-item-list">
            <div class="cart-item check-cart-item">

              {% for good in good %}
              <div class="p-checkbox">
                <input type="checkbox" name=""  checked class="j-checkbox" />
              </div>
              <div class="p-goods">
                <div class="p-img">
                  <img src="{{ good.goodsimg }}" width="80px" height="80px" alt="" />
                </div>
                <div class="p-msg"><p id="goods_name">{{ good.goodsname }}</p>{{ good.goodsdetail }}</div>
              </div>
              {% for i in good_count_color %}
              <div>{{ i.size }}</div>
              {% endfor %}
              <div class="p-price">￥{{ good.goodsprice }}</div>
              <div class="p-num">
                <div class="quantity-form">
                  <a href="javascript:;" class="decrement">-</a>
                  <input type="text" class="itxt" value="1" />
                  <a href="javascript:;" class="increment">+</a>
                </div>
              </div>
              <div class="p-sum">￥{{ good.goodsprice }}</div>
              <div class="p-action"><a href="javascript:;">删除</a></div>
              {% endfor %}
            </div>

          <!-- 结算模块 -->
          <div class="cart-floatbar">
            <div class="select-all">
              <input type="checkbox" name="" id="" class="checkall" />
              全选
            </div>
            <div class="operation">
              <a href="javascript:;" class="remove-batch">删除选中的商品</a>
              <a href="javascript:;" class="clear-all">清理购物车</a>
            </div>
            <div class="toolbar-right">
              <div class="amount-sum">
                已经选
                <em></em>
                件商品
              </div>
              <div class="price-sum">
                总价：
                <em id="goods_price">￥</em>
              </div>
              <div class="btn-area" id="btn_ajax" style="cursor:pointer;" onmousedown="send()">去结算</div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- footer start -->
    <div class="footer">
      <div class="w">
        <!-- mod_service -->
        <div class="mod_service">
          <ul>
            <li>
              <i class="mod-service-icon mod_service_zheng"></i>
              <div class="mod_service_tit">
                <h5>正品保障</h5>
                <p>正品保障，提供发票</p>
              </div>
            </li>
            <li>
              <i class="mod-service-icon mod_service_kuai"></i>
              <div class="mod_service_tit">
                <h5>正品保障</h5>
                <p>正品保障，提供发票</p>
              </div>
            </li>
            <li>
              <i class="mod-service-icon mod_service_bao"></i>
              <div class="mod_service_tit">
                <h5>正品保障</h5>
                <p>正品保障，提供发票</p>
              </div>
            </li>
            <li>
              <i class="mod-service-icon mod_service_bao"></i>
              <div class="mod_service_tit">
                <h5>正品保障</h5>
                <p>正品保障，提供发票</p>
              </div>
            </li>
            <li>
              <i class="mod-service-icon mod_service_bao"></i>
              <div class="mod_service_tit">
                <h5>正品保障</h5>
                <p>正品保障，提供发票</p>
              </div>
            </li>
          </ul>
        </div>
        <!-- mod_help -->
        <div class="mod_help">
          <dl class="mod_help_item">
            <dt>购物指南</dt>
            <dd><a href="#">购物流程</a></dd>
            <dd><a href="#">会员介绍</a></dd>
            <dd><a href="#">生活旅行/团购</a></dd>
            <dd><a href="#">常见问题</a></dd>
            <dd><a href="#">大家电</a></dd>
            <dd><a href="#">联系客服</a></dd>
          </dl>
          <dl class="mod_help_item">
            <dt>购物指南</dt>
            <dd><a href="#">购物流程</a></dd>
            <dd><a href="#">会员介绍</a></dd>
            <dd><a href="#">生活旅行/团购</a></dd>
            <dd><a href="#">常见问题</a></dd>
            <dd><a href="#">大家电</a></dd>
            <dd><a href="#">联系客服</a></dd>
          </dl>
          <dl class="mod_help_item">
            <dt>购物指南</dt>
            <dd><a href="#">购物流程</a></dd>
            <dd><a href="#">会员介绍</a></dd>
            <dd><a href="#">生活旅行/团购</a></dd>
            <dd><a href="#">常见问题</a></dd>
            <dd><a href="#">大家电</a></dd>
            <dd><a href="#">联系客服</a></dd>
          </dl>
          <dl class="mod_help_item">
            <dt>购物指南</dt>
            <dd><a href="#">购物流程</a></dd>
            <dd><a href="#">会员介绍</a></dd>
            <dd><a href="#">生活旅行/团购</a></dd>
            <dd><a href="#">常见问题</a></dd>
            <dd><a href="#">大家电</a></dd>
            <dd><a href="#">联系客服</a></dd>
          </dl>
          <dl class="mod_help_item">
            <dt>购物指南</dt>
            <dd><a href="#">购物流程</a></dd>
            <dd><a href="#">会员介绍</a></dd>
            <dd><a href="#">生活旅行/团购</a></dd>
            <dd><a href="#">常见问题</a></dd>
            <dd><a href="#">大家电</a></dd>
            <dd><a href="#">联系客服</a></dd>
          </dl>
          <dl class="mod_help_item mod_help_app">
            <dt>帮助中心</dt>
            <dd>
              <img src="/static/img/erweima.png" alt="" style="width:95px; heigth:95px"/>
              <p>淘宝客户端</p>
            </dd>
          </dl>
        </div>

        <!-- mod_copyright  -->
        <div class="mod_copyright">
          <p class="mod_copyright_links">关于我们 | 联系我们 | 联系客服 | 商家入驻 | 营销中心 | 手机淘宝 | 友情链接 | 销售联盟 | 淘宝社区 | 淘宝公益 | English Site | Contact U</p>
          <p class="mod_copyright_info">
            地址：北京市昌平区建材城西路金燕龙办公楼一层 邮编：100096 电话：400-618-4000 传真：010-82935100 邮箱: zhanghj+itcast.cn
            <br />
            京ICP备08001421号京公网安备110108007702
          </p>
        </div>
      </div>
    </div>
    <!-- footer end -->

  </body>

</html>
